<script type="text/javascript" charset="utf-8" src="__PUBLIC__/admin/js/uploadify/jquery.uploadify.min.js" ></script>
<link rel="stylesheet" charset="utf-8" type="text/css" href="__PUBLIC__/admin/js/uploadify/uploadify.css"> 
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/admin/js/upload.js" ></script>
	
	
<!-- 用户列表 -->
<style>
	th {
		text-align: center;
	}
	
	.table>tbody>tr>td {
		line-height: 70px;
		text-align: center;
		height:70px;
		margin: 0px;
	}
.bg{ background: none; border: none;}
.uploadify-button-text{ display: inline-flex; }
.uploadify-button-text button{ margin: -10px; }
#iocn img{ height:90px; width: 120px; }
#iocn ul{ margin:0px; padding:0px; }
#iocn li{ margin:0px; padding:0px; position: relative; display:inline-block; width:120px; height:90px; background-position: center; background-size: contain; background-repeat: no-repeat; float: left; margin-right:10px; border:1px #ccc solid; background-color:#f0f0f0;}
#iocn li a{ display:inline-block; position: absolute; bottom:0px; left:0px; text-align:center; width:100%; background-color:rgba(0,0,0,0.3); color:red; cursor: pointer; }
#iocn li:hover a{ background-color:rgba(0,0,0,0.8); }
	
</style>
<div id="data_page" class="in_page">
	
		<div class="panel panel-default">
			<div class="panel-body">
				<form class="form-inline" method="get" name="keyword" id="keyword">
					<div class="form-group">
					轮播图管理
					</div>
					<div class="form-group" style="float: right;">
						<button type="button" class="btn btn-sm btn-primary" id="add" >添加轮播图</button>
					</div>
				</form>
			</div>
		</div>
		
	<table class="table table-striped table-bordered table-condensed ">
		<thead>
			<tr>
				<th width="120px">ID</th>
				
				<th>商品</th>
				<th>图片</th>
				<th>操作</th>

			</tr>
		</thead>
		<tbody>	
			<volist name="list" id="li">			
				<tr>
					<td>{$key}</td>
					<td>{$li.goods_name}</td>
					<td><img src='{$li.img}' width="320px" height="70px"/></td>
					<td>
						<a href="{:U('slider_edit', ['id'=>$li['id']])}" class="btn btn-sm btn-success">编辑</a>
						<button type="button" class="btn btn-sm btn-danger link" link="{:U('Product/del_advertising')}?id={$li.id}">删除</button>
					</td>
				</tr>
				
			</volist>
		</tbody>
	</table>

<div class="modal fade" id="user-add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		 <div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabel">添加轮播图</h4>
			</div>
			<div class="modal-body">
				<form id="bjy-form" class=" form-horizontal"  method="post">
					<input type="hidden" id="id" value="{$id}" />

				
					
					<div class="form-group" style="display: none;">
					 	<label for="title" class="col-sm-2 control-label"  >链接地址:</label>
						<div class="col-sm-6">
							<input type="url" class="form-control" id="src" placeholder="如：https://www.baidu.com/"/>
						</div>
					</div>

					<div class="form-group">
					 	<label for="goods_name" class="col-sm-2 control-label"  >商品名称:</label>
						<div class="col-sm-6">
							<input type="url" class="form-control" id="goods_name" />
						</div>
					</div>
					
					<div class="form-group">
						 <label for="inputPassword3" class="col-sm-2 control-label" id="iocnname">(640x200)轮播图图片</label>
						<div class="col-sm-10">
							<input type="file" class="form-control" id="icon"><br />    	  
					    	<div id="iocn" class="upviewer" ></div>
						</div>
					</div>
					
					<div class="form-group">
					 <div class="col-sm-offset-2 col-sm-10">
						 <button type="button" class="btn btn-primary " id="button">提交</button>
					</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
</div>
<div>{$page}</div>
<script language="javascript">
$(function(){
	
$("#add").click(function(){
	$('#user-add').modal('show');
})
			
initDelFile();
	//多文件上传
initUploadify({ ID:'icon',url:"{:U('Upload/upload')}",success:function(obj){ 
		if(obj.s){
			$('#iocn').append('<li><img src="'+obj.d+'"/><a d_path="'+obj.d+'">删除</a></li>');
			initDelFile();
		}else{
			alert(obj.m);
		}
	} 
});

function initDelFile(){
	$('#iocn li a').unbind('click').click(function(){
		if(!confirm('你确认删除吗?')) return false;
		var _this = $(this);
		var dpath = $(_this).attr('d_path');
		if(!dpath) return false;
		$.post('{:U('Upload/delfile')}',{filepath:dpath},function(obj){ 
			if(obj.s){ 
				$(_this).parents('li').remove();
			}else{
				alert(obj.m);
				$(_this).parents('li').remove();
			} 
		},'json');
	});
}

$("#button").click(function(){
		var src = $('#src').val();
	 	var iocn=[];
	 	
	 	$("#iocn").find("img").each(function(){
	 		iocn.push($(this).attr('src'));
	 	});
		if($("#iocn").find("img").length!=1){
			var iocnname  = $("#iocnname").text();
				alert("请上传一张"+iocnname);
				return false;
		}
	 	
	 	var url ="{:U('Product/add_advertising')}"
	 	var parm = {
	 		src:src,
	 		iocn:iocn,
	 		goods_name:$("#goods_name").val()
	 	}
	 /*	console.log(parm);
	 	return false;*/
	 	$.post(url,parm,function(obj){
	 		if(obj.s){
	 			alert(obj.m);
	 			location.href="{:U('Product/shopindex')}";
	 		}
	 	});
	 })

});
</script>